<template>
  <!--  根据问题来源-->
  <div ref="ProblemSourceCount" :style="{height: height+'px'}">

  </div>


</template>

<script>
import echarts from "echarts";
import {Api} from '@/api/index.js'

export default {
  name: "ProblemSourceCount",
  props: {
    height: {
      type: Number,
      default: 350,
    },
    dataToQuery: {
      type: Object,
      default: {},
    },
    accountType: {
      type: String,
    }
  },
  data() {
    return {
      problemSourceDescList: [],
      totalCountList: [],
      openCountList: [],
      queryUrl: Api.problemSourceCount

    }
  },
  mounted() {
    this.query();
  },
  methods: {
    query() {
      let _this = this;
      let container = echarts.init(this.$refs.ProblemSourceCount);

      this.$http.post(this.queryUrl + this.accountType, this.dataToQuery).then(res => {
        if (res.data.status === 201) {
          this.$Message.error(res.data.msg);
        }
        if (res.data.status === 200) {
          let option = _this.getOption(res.data.data);
          container.setOption(option);

        }
        window.onresize = container.resize;
      }).catch(e => {
        console.log(e)
        this.$Message.error("查询失败")
      });


    },
    getOption(data) {
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['问题数量', '已完成整改']
        },
        toolbox: {
          show: true,
          orient: 'vertical',
          left: 'right',
          top: 'center',

        },
        xAxis: [
          {
            type: 'category',
            axisTick: {show: false},
            data: data.problemSourceDescList,
            axisLabel: {
              show: true,
              interval: 0,
              formatter: function (params) {
                var newParamsName = "";
                var paramsNameNumber = params.length;
                var provideNumber = 3; // 一行显示几个字 然后就超过字数就会自动换行
                var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                if (paramsNameNumber > provideNumber) {
                  for (var p = 0; p < rowNumber; p++) {
                    var tempStr = "";
                    var start = p * provideNumber;
                    var end = start + provideNumber;
                    if (p == rowNumber - 1) {
                      tempStr = params.substring(start, paramsNameNumber);
                    } else {
                      tempStr = params.substring(start, end) + "\n";
                    }
                    newParamsName += tempStr;
                  }
                } else {
                  newParamsName = params;
                }
                return newParamsName;
              },
            },
          }
        ],
        yAxis: [
          {
            type: 'value',

          }
        ],
        color: ['#42A5F5', '#FFC310'],
        series: [
          {
            name: '问题数量',
            type: 'bar',
            // barWidth : 30,
            barGap: "1%",
            label: {
              show: true,

            },
            itemStyle: {
              barBorderRadius: [4, 4, 0, 0],
            },
            data: data.totalCountList,

          },
          {
            name: '已完成整改',
            type: 'bar',
            barGap: "1%",
            label: {
              show: true,

            },
            // barWidth: 30,
            itemStyle: {
              barBorderRadius: [4, 4, 0, 0],
            },

            data: data.openCountList,
          },

        ]
      }
    },


  }

}
</script>

<style scoped>

</style>
